<template>
    <div v-loading="loading">        
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <template>
            <el-descriptions class="margin-top" title="用户充值详情" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        用户名头像
                    </template>
                    <!-- <div v-if="datas.user_info_more" style="display: flex;align-items: center;">
                        <el-avatar size="medium" :src="datas.user_info_more.avatar" style="margin-right: 10px;"></el-avatar>
                        {{ datas.user_info_more.name }}
                    </div> -->

                    <UserInfo :user_id="datas.user_id"  :userInfos="datas.user_info" v-if="datas.user_id"></UserInfo> 
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        ID
                    </template>
                    {{ datas.id }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        充值人民币
                    </template>
                    {{ datas.money }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        金币充值前余额
                    </template>
                    {{ datas.before }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        金币充值后余额
                    </template>
                    {{ datas.after }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        到账金币
                    </template>
                    {{ datas.balance }}
                </el-descriptions-item>

                
                <el-descriptions-item>
                    <template slot="label">
                        内部订单号
                    </template>
                    {{ datas.trade_no }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        外部订单号
                    </template>
                    {{ datas.out_trade_no }}
                </el-descriptions-item>

               
                <el-descriptions-item>
                    <template slot="label">
                        支付方式
                    </template>
                    {{ datas.payment == 'wechat' ? "微信":datas.payment == 'alipay' ? "支付宝":"ios" }}
                </el-descriptions-item>
                
                <el-descriptions-item>
                    <template slot="label">
                        状态
                    </template>
                    <el-tag v-if="datas.status == 0" type="warning">待支付</el-tag>
                    <el-tag v-else-if="datas.status == 1" type="success">已支付</el-tag>
                    <el-tag v-else-if="datas.status == 2" type="danger">充值失败</el-tag>
                    <el-tag v-else-if="datas.status == 3" type="danger">取消</el-tag>
                    <el-tag v-else-if="datas.status == 4" type="danger">退款</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        充值时间
                    </template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        回调时间
                    </template>
                    {{ datas.notify_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        取消时间
                    </template>
                    {{ datas.cancel_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        退款时间
                    </template>
                    {{ datas.refund_at }}
                </el-descriptions-item>

                <el-descriptions-item v-if="!datas.cancel_at">
                    <template slot="label">
                        修改时间
                    </template>
                    {{ datas.updated_at }}
                </el-descriptions-item>
            </el-descriptions>

        </template>

        <div>
          
        </div>

    </div>
</template>
      
<script>
export default {
    data() {
        return {
            visible: false,
            loading: false,
            tabdata: [],
            datas: {}
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log("this.$route.query.id", this.$route.query.id)
            this.getRechargeDetails(this.$route.query.id)
        }


    },
    methods: {
        getRechargeDetails(id) {
            let that = this
            this.$request.get('/recharge-order/get/' + id).then((res) => {
                that.datas = res
                console.log("getRechargeDetails", res)
            })
        },
    },
}
</script>
      
<style lang="scss" >
.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}
</style>